<template>
  <div class="titleArea">
    <ul class="actionUl">
      <li class="action-item">
        <el-tooltip class="item" effect="dark" content="新建文件夹" placement="top">
          <i class="addDir" @click="handleCreateFolder"></i>
        </el-tooltip>
      </li>
      <li class="action-item">
        <el-tooltip class="item" effect="dark" content="新建工作流" placement="top">
          <i class="workFlow" @click="handleCreateWorkflow"></i>
        </el-tooltip>
      </li>
      <!-- <li class="action-item">
        <el-tooltip class="item" effect="dark" content="导入" placement="top">
          <i class="import"></i>
        </el-tooltip>
      </li> -->
      <li class="action-item">
        <el-tooltip class="item" effect="dark" content="全部收起" placement="top">
          <i class="allShrink" @click="handleCollapseAll"></i>
        </el-tooltip>
      </li>
      <li class="action-item">
        <el-tooltip class="item" effect="dark" content="全部展开" placement="top">
          <i class="allExpand" @click="handleExpandAll"></i>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'

@Component({

})
export default class TitleArea extends Vue {
  handleCreateFolder() {
    this.$emit('handleCreateFolder')
  }
  handleCreateWorkflow() {
    this.$emit('handleCreateWorkflow')
  }
  handleCollapseAll() {
    this.$emit('handleCollapseAll')
  }
  handleExpandAll() {
    this.$emit('handleExpandAll')
  }
}

</script>

<style lang="scss" scoped>
.titleArea {
  // height: 40px;
  // display: flex;
  // justify-content: space-between;
  padding: 2px;
  align-items: center;
  // border-bottom: 1px solid #2a4060;
  flex: none;

  .actionUl {
    display: flex;
    justify-content: flex-end;

    i {
      display: block;
      width: 14px;
      height: 14px;
      cursor: pointer;
      margin-left: 10px;

      &.addApi {
        background-image: url('~@/assets/images/apiManage/api.png');
      }

      &.addDir {
        background-image: url('~@/assets/images/apiManage/add-dir.png');
      }

      &.workFlow {
        background-image: url('~@/assets/images/workspace/workFlow.png');
      }

      &.import {
        background-image: url('~@/assets/images/apiManage/import.png');
      }

      &.allShrink {
        background-image: url('~@/assets/images/apiManage/shrink.png');
      }

      &.allExpand {
        background-image: url('~@/assets/images/apiManage/expand.png');
      }
    }
  }
}
</style>
